<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item,index) in breadList" :key="index" :to="{ path: item.path }">{{item.meta.title}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" />
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input v-model="ruleForm.password" type="password" />
          </el-form-item>
          <el-form-item label="用户地址" prop="address">
            <el-input v-model="ruleForm.address" />
          </el-form-item>
          <el-form-item label="电话号码" prop="phone">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
          <el-form-item label="用户类型" prop="type">
            <el-radio-group v-model="ruleForm.type">
              <el-radio :label="0">管理员</el-radio>
              <el-radio :label="1">普通用户</el-radio>
              <el-radio :label="2">vip用户</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户状态" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="0">停用</el-radio>
              <el-radio :label="1">正常</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="primary" @click="submitForm(ruleFormRef)">新增</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { useRouter, useRoute } from 'vue-router'
  import { ref, reactive, watch } from "vue";
  import request from "../../utils/request";
  import { ElNotification } from "element-plus";
  export default {
    setup() {
      let breadList = [] // 路由集合
      const route = useRoute()
      const getBreadcrumb = (url) => {
        let matched = url.matched;
        //如果不是首页
        if ("Home" == matched[0].name) {
          matched[0].meta = { title: "系统首页" }
        }
        breadList = matched;
      }
      watch(route, (newValue, oldValue) => {
        // console.log(222222,newValue)
        getBreadcrumb(newValue)
      }, { deep: true, immediate: true });

      const resetForm = (formEl) => {
        if (!formEl) return;
        formEl.resetFields();
      };
      // 先检查用户名是否存在 存在提示用户重新输入，不存在就成功添加
      const submitForm = (formEl) => {
        formEl.validate((valid) => {
          if (valid) {
            request({
              url: "/user/getUsersByName",
              method: "post",
              data: {
                username: ruleForm.username,
              },
            }).then((res) => {
              if (res.data.code == 200) {
                ElNotification({
                  title: "提示",
                  message: "用户已存在",
                  type: "warning",
                });
              } else {
                request({
                  url: "/user/add",
                  method: "post",
                  data: ruleForm,
                }).then((res) => {
                  if (res.data.code == 200) {
                    ElNotification({
                      title: "提示",
                      message: "添加成功",
                      type: "success",
                    });
                    // // 跳转到用户列表
                    // router.push("/userInfo");
                    resetForm(formEl);
                  } else {
                    ElNotification({
                      title: "提示",
                      message: "添加失败",
                      type: "error",
                    });
                  }
                });
              }
            });
          } else {
            ElNotification({
              title: "提示",
              message: "请检查表单是否填写完整",
              type: "warning",
            });
            return false;
          }
        });
      };
      const ruleForm = reactive({
        userId: "",
        username: "",
        password: "",
        address: "",
        phone: "",
        type: 0,
        status: 1,
      });
      const rules = reactive({
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 1,
            max: 7,
            message: "长度大于1小于7",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话号码",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: false,
            message: "请输入地址",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择用户类型",
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择用户状态",
            trigger: "change",
          },
        ],
      });
      const ruleFormRef = ref();
      const centerDialogVisible = ref(false);
      return {
        breadList,
        resetForm,
        ruleFormRef,
        submitForm,
        ruleForm,
        rules,
        centerDialogVisible,
      };
    },
  };
</script>
<style lang="scss" scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
</style>